<template>
    <div class="inter">
        <loading v-bind:state="state"></loading>
        <div class="intelist">
            <div class="inte_1">
                <p class="p1">{{selectTime.year}}年{{selectTime.mon}}月</p>
                <p class="p2">使用积分{{integralAll}}</p>
            </div>
            <img :src="this.$Public.ossImg+'time_inter.svg'" class="icon" @click="openPopup1">
            <img :src="this.$Public.ossImg+'search_inter.svg'" class="icon" @click="openPopup2">
        </div>
        <div class="inter_l">
            <ul v-infinite-scroll="loadMore"
                infinite-scroll-disabled="false"
                infinite-scroll-distance="1"
                infinite-scroll-immediate-check="true"
            >
                <li @click="toInterDetail(coup.id)" v-for="coup in coupon" v-bind:key="coup.item">
                    <img :src="coup.avatar">
                    <div class="inter_m">
                        <p>{{coup.des}}</p>
                        <span>{{coup.created}}</span>
                    </div>
                    <p>-{{coup.integral}}
                        <span>积分</span>
                    </p>
                </li>
                <listload :stateLoad="loading"></listload>
                <p v-show="LastData" class="last">敬请期待更多产品</p>
            </ul>
        </div>
        <mt-popup
                v-model="popupVisible2"
                position="bottom">
            <div class="time_total">
                <p class="p3">选择交易类型</p>
                <div class="time_total_m">
                    <div class="item">
                        <div :class="[normalClass,transType0?selectClass:'']" @click="btnDemo(0)">全部</div>
                        <div class="itemin bac_w"></div>
                        <div class="itemin bac_w"></div>
                    </div>
                    <div class="item">
                        <div :class="[normalClass,transType1?selectClass:'']" @click="btnDemo(1)">代金券</div>
                        <div :class="[normalClass,transType2?selectClass:'']" @click="btnDemo(2)">积分商城</div>
                        <div class="itemin bac_w"></div>
                    </div>
                </div>
                <p class="p4 cancel" @click="popupVisible2=false">取消</p>
            </div>
        </mt-popup>
        <mt-popup
                v-model="popupVisible1"
                position="bottom">
            <div class="time_total">
                <van-datetime-picker
                        v-model="currentDate"
                        type="year-month"
                        :min-date="minDate"
                        :max-date="maxDate"
                        style="width: 100vw"
                        @confirm="confirm"
                        @cancel="closePopup1"
                ></van-datetime-picker>
            </div>
        </mt-popup>
    </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: `intelist`,
    data() {
      return {
        date: '',
        state: true,
        coupon: [], // 代金券
        popupVisible2: false, // 交易类型弹窗是否显示
        popupVisible1: false, // 交易时间弹窗是否显示
        selectTime: { // 当前查询的年月
          year: new Date().getFullYear(),
          mon: new Date().getMonth() + 1
        },
        integralAll: 0, // 当前查询的积分总额
        normalClass: 'itemin',
        selectClass: 'item_true',
        transType0: true,
        transType1: false,
        transType2: false,
        minDate: new Date(2016, 1, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        loading: false, // 滑到底部加载
        LoadData: true, // 是否应该调用获取数据方法
        LastData: false // 数据是否加载完没有了
      }
        ;
    },
    created() {
      this.loadMore();
    },
    methods: {
      routeBack: function () {
        this.$router.back(-1);
      },
      btnDemo: function (type) {
        this.closePopup2(); // 关闭筛选遮罩
        if (type === 0) {
          this.transType0 = true;
          this.transType1 = false;
          this.transType2 = false;
        } else if (type === 1) {
          this.transType0 = false;
          this.transType1 = true;
          this.transType2 = false;
        } else if (type === 2) {
          this.transType0 = false;
          this.transType1 = false;
          this.transType2 = true;
        }
        // 调用查询方法
        this.coupon = [];
        this.loadMore(type);
      },
      toInterDetail(id) {
        //  去代金券详情
        this.$router.push({name: 'integraldetail', query: {id: id}});
      },
      confirm(time) {
        // 选中的年月
        let year = time.getFullYear();
        let mon = time.getMonth() + 1;
        this.selectTime.year = year;
        this.selectTime.mon = mon;
        this.closePopup1();
        this.coupon = [];
        this.loadMore();
        console.log(this.selectTime);
      },
      closePopup1() {
        // 关闭时间popup
        this.popupVisible1 = false;
      },
      openPopup1() {
        // 打开时间popup
        this.popupVisible1 = true;
        console.log('aasadasd');
        this.$Spread.getDemo().then((res) => {
          console.log('res', res);
        });
      },
      closePopup2() {
        // 关闭筛选popup
        this.popupVisible2 = false;
      },
      openPopup2() {
        // 打开筛选popup
        this.popupVisible2 = true;
      },
      loadMore(type) {
        // 获取数据和上拉加载共用方法
        console.log(this.LoadData);
        if (this.LoadData === true) {
          // 上拉加载更多
          this.loading = true;
          // 封掉查询数据接口
          this.LoadData = false;
          setTimeout(() => {
            this.$Spread.getvoucherList().then(res => {
              // 去掉初始遮罩
              this.state = false;
              // 组装数据
              res.data.map((item, index) => {
                this.coupon.push(item);
              });
              // 对返回数据的数量进行判断，如果小于每页规定的就不要再请求了
              let DataNum = res.data.length;
              if (DataNum < 10) {
                this.LoadData = false;
                this.loading = false;
                this.LastData = true;
                return;
              }
              console.log(DataNum);
              // 查看本地组装后的数据
              console.log('this.coupon', this.coupon);
              // 去掉上拉加载动画
              this.loading = false;
              //  打开查询数据接口
              this.LoadData = true;
            });
          }, 1000);
        }
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .inter {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-flow: column nowrap
    }

    .last {
        text-align center;
    }

    .inter_l {
        flex: 1;
        overflow auto;
        & ul > li {
            height: vw(72px);
            flex-x();
            background: white;
            box-sizing: border-box;
            padding: 0 vw(10px);
            margin-bottom: 3px;
            & img {
                width: vw(52px);
                border-radius: 50%
            }
            & .inter_m {
                flex-y();
                align-items: flex-start;
                flex: 1;
                height: vw(72px);
                & p {
                    word(16px, #222);
                    padding-bottom: 2vw
                }
                & span {
                    word(14px, #999)
                }
            }
            & p {
                word(20px, #000);
                & span {
                    word(18px, #000);
                }
            }
        }
    }

    .intelist {
        flex-x();
        height: vw(52px);
        padding: 0 vw(15px)
    }

    .p1 {
        word(16px, #101010);
        line-height: 1.5
    }

    .p2 {
        word(12px, #999)
    }

    .icon {
        width: vw(24px);
        height: vw(24px);
        padding-left: vw(30px)
    }

    .inte_1 {
        flex-y();
        flex: 1;
        align-items: flex-start;
    }

    .time_total {
        height: vw(285px);
        width: 100vw;
        flex-y();
        background: #fafafa
    }

    .p3 {
        word(15px, #101010);
        height: vw(42px);
        border-bottom: 1px solid #bbb;
        width: 100vw;
        line-height: vw(32px);
        text-align: center
    }

    .time_total_m {
        flex: 1;
        flex-y();
    }

    .item {
        flex-x();
        width: 100vw;
        box-sizing: border-box;
        padding: 0 vw(15);
        margin: 2vw 0
    }

    .itemin {
        height: vw(62px);
        flex-x();
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #666;
        width: vw(110x)
    }

    .item_true {
        background: gradient-color;
        color: #fff
    }

    .p5 {
        color: #fff
    }

    .p6 {
        color: #666;
        background: #fff
    }

    .cancel {
        border-top: 4px solid #bbb;
        width: 100vw;
        text-align: center;
        line-height: 46px;
        color: #666
    }

    .bac_w {
        background: #fafafa
    }
</style>
